<template>
  <yt-page title="企业类型统计" scroll :leftData="leftData">
    <div class="chart" ref="chart" style="width: 100%; height: 50%"></div>
    <h6 class="text-center lengent-title">共 46 家企业</h6>
    <yt-cell
      v-for="(item, index) in items"
      :key="item.name"
      labelWidth="200px">
        <div slot="label" class="lengent-wrap">
          <div class="lengent" :style="getBgC(index)"></div>
          <span>{{item.name}}</span>
        </div>
        <span slot="default">{{item.value}} 家</span>
      </yt-cell>
  </yt-page>
</template>

<script>
import echarts from 'echarts'

const COLORS = ['#189aca', '#fd9827', '#9aca41', '#cdfd9e', '#03a9f5', '#348d7c']

export default {
  data() {
    return {
      leftData: [
        {
          font: 'iconfont icon-left',
          click: () => {
            this.$router.$back()
          }
        }
      ],
      items: [],
      chartObj: {}
    }
  },
  activated () { 
    this.items = [
      {value: 335, name: '危险化学品'},
      {value: 310, name: '非煤矿山'},
      {value: 234, name: '金属冶炼'},
      {value: 135, name: '工贸企业'},
      {value: 135, name: '烟花爆竹'},
      {value: 1548, name: '其他'}
    ]
    this.init()
  },
  methods: {
    init () {
      this.chartObj = echarts.init(this.$refs.chart)

      let self = this
      let option = {
            title: {
                subtext: '企业类型分布图'
            },
            color: COLORS,
            series: [{
            name: '访问来源',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            label: {
              normal: {
                show: true,
                position: 'inside',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'bold'
                }
              }
            },
            data: [
                {value: 335, name: '危险化学品'},
                {value: 310, name: '非煤矿山'},
                {value: 234, name: '金属冶炼'},
                {value: 135, name: '工贸企业'},
                {value: 135, name: '烟花爆竹'},
                {value: 1548, name: '其他'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
        }

      this.chartObj.setOption(option)
    },
    getBgC (idx) {
      return `background-color:${COLORS[idx]}`
    }
  }
}
</script>

<style lang="stylus" scoped>
>>>.yt-page-container
  background-color #fff
>>>.yt-cell-label 
  padding 0
.chart 
  margin 0 auto
.lengent-title 
  color #707070
  margin-bottom 20px
.lengent-wrap
  display flex
  align-items center
  .lengent
    display inline-block
    width 20px
    height 20px
    border-radius 50%
    margin-right 10px
</style>
